<template>
  <div class="user">
    <scroll-view class="scrollview" :scroll-y="true">
      <div class="header">
        <image
          class="header-bg"
          src="https://ysgapi.yfzxzjysg.top/bg.png"
          mode=""
        />
        <div class="user-info" @click="onClickPage('/pages/userinfo/userinfo')">
          <view class="user-info-image">
            <u-image
              class="user-image"
              :src="userInfo.headimgurl || require('@/assets/logo.png')"
              shape="circle"
              width="110rpx"
              height="110rpx"
            ></u-image>
          </view>
          <view class="info">
            <div class="info-name">{{ userInfo.nickname || "微信昵称" }}</div>
            <div class="info-Lv" v-if="isToken">Lv.{{ userInfo.level }}</div>
          </view>
        </div>
      </div>
      <view v-if="isToken">
        <view class="my-log" @click="onClickPage('/pages/log/log')">
          <div class="my-log-header">
            <div class="my-logo-title">学习记录</div>
            <div class="my-hz">
              <div v-for="index in userInfo.level" class="hz-item" :key="index">
                <u-image
                  class="progress-image"
                  :src="require('@/assets/hz.png')"
                  shape="circle"
                  width="40rpx"
                  height="40rpx"
                ></u-image>
              </div>
            </div>
          </div>
          <div class="my-log-online my-log-row">
            线上课程
            <text class="time">{{ userInfo.line_on }}</text>
          </div>
          <div class="my-log-offline my-log-row">
            线下课程
            <text class="time">{{ userInfo.line_up }}</text>
          </div>
          <div class="progress-style">
            <u-image
              class="progress-image"
              :src="require('@/assets/hz.png')"
              shape="circle"
              width="40rpx"
              height="40rpx"
            ></u-image>
            <view class="LV"> LV.{{ userInfo.level }} </view>
            <div class="progress-main">
              <u-line-progress
                :percentage="percentage"
                activeColor="#ff0000"
              ></u-line-progress>
            </div>
          </div>
        </view>
        <div class="my-log">
          <div
            v-for="(item, index) in list"
            :key="index"
            @click="onClickPage(item.path)"
            :style="{
              borderBottom: index == list.length && 'none',
            }"
          >
            <label>
              <button
                :open-type="item.path"
                v-if="item.path == 'contact'"
              ></button>
              <div class="row">
                <div class="left">{{ item.title }}</div>
                <div class="right">
                  <image :src="item.icon" mode="widthFix" />
                </div>
              </div>
            </label>
          </div>
        </div>
        <div class="auth-button-out" @click="onOut()">退出登录</div>
      </view>
      <div
        class="auth-button"
        v-if="!isToken"
        @click="onClickPage('/pages/login/login')"
      >
        立即登录
      </div>
    </scroll-view>
  </div>
</template>

<script>
import { getStorage, removeStorage, setStorage } from "utils/auth";
import { getUserinfo } from "apis/modules/user";
export default {
  name: "user",
  data() {
    return {
      searchValue: "",
      userInfo: "",
      percentage: 0,
      list: [
        {
          title: "我的收藏",
          icon: require("@/assets/sc.png"),
          path: "/pages/collect/collect",
        },
        // {
        //   title: "我的课程",
        //   icon: require("@/assets/kc.png"),
        //   path: "/pages/collect/collect",
        // },
        {
          title: "我的报名",
          icon: require("@/assets/bm.png"),
          path: "/pages/sign/sign",
        },
        {
          title: "学生认证",
          icon: require("@/assets/iphone.png"),
          path: "/pages/authentication/authentication",
        },
        {
          title: "问题反馈",
          icon: require("@/assets/lj.png"),
          path: "contact",
        },
        {
          title: "个人能力素养图",
          icon: require("@/assets/nlsy.png"),
          path: "/pagesA/link/link",
        },
        {
          title: "优秀教师评分榜",
          icon: require("@/assets/pf.png"),
          path: "/pages/rank/rank",
        },
      ],
      isToken: false,
    };
  },
  async onShow() {
    await this.$nextTick();
    let isToken = !!getStorage("token");
    this.isToken = isToken;
    if (isToken) {
      getUserinfo().then((info) => {
        let userInfo = info;
        userInfo.level = userInfo.level > 6 ? 6 : userInfo.level;
        this.percentage = (userInfo?.level / 6) * 100;
        this.userInfo = userInfo;
        setStorage("userInfo", info);
      });
    }
  },
  methods: {
    onOut() {
      removeStorage("token");
      this.isToken = false;
      this.userInfo = "";
    },
    onClickPage(url) {
      if (url.includes("login")) {
        this.$Router.push({
          path: url,
        });
      }
      if (url == "contact" || !this.isToken) return false;
      this.$Router.push({
        path: url,
      });
    },
  },
};
</script>
<style lang="scss">
.user {
  height: 100vh;
  .scrollview {
    height: 100%;
    overflow: hidden;
    background: #eeeeee;
  }
  .header {
    padding: 180rpx 40rpx 40rpx;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    overflow: hidden;
    &::after {
      content: "欢迎进入      走进艺术宫";
      position: absolute;
      top: 70rpx;
      left: 40rpx;
      width: 110rpx;
      color: #fff;
      font-size: 22rpx;
    }
    .header-bg {
      position: absolute;
      z-index: -1;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
    }
    .user-info {
      display: flex;
      align-items: center;
      &-image {
        flex-shrink: 0;
      }
      .info {
        margin-left: 20rpx;
        &-name {
          font-weight: 800;
          font-size: 28rpx;
          color: #eeeeee;
        }
        &-Lv {
          font-weight: 400;
          font-size: 20rpx;
          width: 98rpx;
          height: 36rpx;
          line-height: 36rpx;
          margin-top: 16rpx;
          box-sizing: border-box;
          color: #fff;
          padding-left: 20rpx;
          background: rgba(255, 255, 255, 0.35);
          border-radius: 48rpx 48rpx 48rpx 48rpx;
          box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.16);
        }
      }
    }
  }
  .my-log {
    padding: 40rpx 30rpx;
    margin: 40rpx 30rpx;
    background: #fff;
    border-radius: 20rpx;
    &-header {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .my-hz {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-left: 20rpx;
        .hz-item {
          margin-right: 16rpx;
        }
      }
    }
    .my-logo-title {
      height: 45rpx;
      font-size: 32rpx;
      font-weight: 800;
      color: #333333;
    }
    &-row {
      height: 33rpx;
      font-size: 24rpx;
      font-weight: 500;
      color: #999999;
      margin-top: 38rpx;
      .time {
        font-size: 32rpx;
        margin-left: 20rpx;
      }
    }
    .progress-style {
      margin-top: 38rpx;
      display: flex;
      height: 76rpx;
      background: rgba(245, 245, 245, 0.39);
      border-radius: 48rpx 48rpx 48rpx 48rpx;
      align-items: center;
      padding: 0 30rpx;
      .progress-image {
        flex-shrink: 0;
      }
      .LV {
        flex-shrink: 0;
        width: 43rpx;
        height: 32rpx;
        font-size: 24rpx;
        font-weight: bold;
        color: rgba(102, 102, 102, 0.63);
        margin: 0 40rpx 0 10rpx;
      }
      .progress-main {
        flex: 1;
      }
    }
    .row {
      display: flex;
      border-bottom: 1rpx solid #e5e5e5;
      justify-content: space-between;
      align-items: center;
      height: 95rpx;
      .left {
        height: 40rpx;
        font-weight: bold;
        color: #333333;
      }
      .right {
        width: 34rpx;
        image {
          width: 100%;
        }
      }
    }
  }
}
.auth-button {
  background: #eb5e15;
  color: #fff;
  margin: 200rpx auto;
  width: 40%;
  height: 80rpx;
  border-radius: 16rpx;
  text-align: center;
  line-height: 80rpx;
}
.auth-button-out {
  background: #eb5e15;
  color: #fff;
  margin: 40rpx auto 100rpx;
  width: 80%;
  height: 80rpx;
  border-radius: 80rpx;
  text-align: center;
  line-height: 80rpx;
}
</style>
